<template>
  <div class="info-card" :class="type">
    <div class="card-box">
      <ali-icon
        :icon="icon"
        v-if="icon && !img"
        class="card-mark"
        color="white"
        :size="20"
      />
      <img :src="img" v-if="img" class="card-mark" width="20" />
      <div class="card-title">
        <p class="text">{{ title }}</p>
      </div>
      <div class="card-data">
        <span class="data-num">
          <i-count-up
            :delay="delay"
            :endVal="data"
            :options="options"
            @ready="onReady"
          /> </span
        ><span class="data-unit"> {{ dataUnit }}</span>
      </div>
    </div>
    <img class="card-back1" :src="CARD_BACK1" />
    <img class="card-back2" :src="CARD_BACK2" />
  </div>
</template>

<script>
import ICountUp from "vue-countup-v2";
import AliIcon from "../aliIcon/index";
import CARD_BACK1 from "@/assets/img/card-back1.png";
import CARD_BACK2 from "@/assets/img/card-back2.png";

export default {
  components: {
    "i-count-up": ICountUp,
    "ali-icon": AliIcon,
  },
  props: {
    title: {
      type: String,
      default() {
        return "卡片标题";
      },
    },
    data: {
      type: Number,
      default() {
        return 170000000;
      },
    },
    dataUnit: {
      type: String,
      default() {
        return "元";
      },
    },
    type: {
      type: String,
      default() {
        return "info";
      },
    },
    icon: {
      type: String,
      default() {
        return "";
      },
    },
    img: {
      type: String,
      default() {
        return "";
      },
    },
  },
  computed:{
    start(){
      if(this.data>100000){
        return 90000;
      }
    },
    end(){

    },
  },
  data() {
    // let endVal = this.data;
    return {
      delay: 1000,
      // endVal: endVal,
      CARD_BACK1,
      CARD_BACK2,
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ",",
        decimal: ".",
        prefix: "",
        suffix: "",
      },
    };
  },
  computed: {
    dataNumber() {
      return this.formatNumber(this.num, ",", 3);
    },
  },
  filters: {
    num(val) {
      if (val > 10000) {
        return parseInt(val / 10000) + "万+";
      }
      return val;
    },
  },
  created() {},
  methods: {
    formatNumber(value, seperator, digitNum) {
      var initV = value;
      if (
        (value = (value = value + "").replace(/^\s*|\s*$|,*/g, "")).match(
          /^\d*\.?\d*$/
        ) == null
      )
        return initV;
      value = digitNum >= 0 ? Number(value).toFixed(digitNum) + "" : value;
      var r = [],
        tl = value.split(".")[0],
        tr = value.split(".")[1];
      tr = typeof tr != "undefined" ? tr : "";
      if (seperator != null && seperator != "") {
        while (tl.length >= 3) {
          r.push(tl.substring(tl.length - 3));
          tl = tl.substring(0, tl.length - 3);
        }
        if (tl.length > 0) r.push(tl);
        r.reverse();
        r = r.join(seperator);
        return tr == "" ? r : r + "." + tr;
      }
      return value;
    },
    onReady: function (instance, CountUp) {
      const that = this;
      instance.update(that.data);
    },
  },
};
</script>

<style lang="scss" scoped>
.info-card {
  position: relative;
  .card-back1,
  .card-back2 {
    position: absolute;
    display: block;
    width: 100%;
  }
  .card-back1 {
    bottom: 0;
    left: 0;
  }
  .card-back2 {
    bottom: 0;
    left: 0;
  }
  background: linear-gradient(90deg, #fe9856, #ffd684);
  &.warn {
    background: linear-gradient(90deg, #fe9856, #ffd684);
  }
  &.danger {
    background: linear-gradient(90deg, #fc6165, #fb7478);
  }
  &.info {
    background: linear-gradient(90deg, #71d5f7, #308eff);
  }
  &.purple {
    background: linear-gradient(90deg, #b39aff, #7972fe);
  }
  border-radius: 8px;
  .card-box {
    position: relative;
    padding: 18px 19px;
    padding-bottom: 20px;
    .card-mark {
      position: absolute;
      top: 12px;
      right: 12px;
    }
    .card-title {
      .text {
        font-size: 12px;
        font-weight: 400;
        color: #ffffff;
        line-height: 24px;
      }
      margin-bottom: 20px;
    }
    .card-data {
      .data-num {
        font-size: 30px;
        font-weight: 400;
        color: #ffffff;
        line-height: 30px;
      }
      .data-unit {
        font-size: 14px;
        font-weight: 400;
        color: #ffffff;
      }
    }
  }
}
</style>
